<!--官方示例：https://openlayers.org/en/latest/examples/popup.html-->
<template>
  <div id="popup" class="ol-popup">
    <a href="#" ref="popup-closer" class="ol-popup-closer" @click="close"></a> <!--@click='close'></a>-->
    <div id="popup-content">
      <Row :gutter="4">
        <Col span="16"><span>{{devData.title}}</span></Col>
        <Col span="8" v-if="rowData.status==1"><span style="color: #3caf36">{{ $t('online') }}</span></Col>
        <Col span="8" v-else><span style="color: #c80000 ">{{$t('offline')}}</span></Col>
      </row>
      <Row :gutter="4">
        <Col span="8" class="span-rg"><span>{{$t('terminal')}}ID：</span></Col>
        <Col span="16"><span>{{devData.arrt.channelCode}}</span></Col>
      </Row>
      <Row :gutter="4">
        <Col span="8" class="span-rg"><span>{{$t('equipment')}}：</span></Col>
        <Col span="16"><span>{{devData.arrt.deviceName}}</span></Col>
      </Row>
      <Row :gutter="4">
        <Col span="8" class="span-rg"><span>{{$t('personnel')}}：</span></Col>
        <Col span="16"><span>{{devData.arrt.userName}}</span></Col>
      </Row>
      <Row :gutter="4">
        <Col span="8" class="span-rg"><span>{{$t('location')}}：</span></Col>
        <Col span="16"><span>{{devData.longitude}}</span></Col>
      </Row>
      <Row :gutter="4">
        <Col span="8"><span></span></Col>
        <Col span="16"><span>{{devData.latitude}}</span></Col>
      </Row>
<!--      <Row :gutter="4">
        <Col span="8" class="span-rg"><span>方向：</span></Col>
        <Col span="16"><span>{{devData.arrt.direction}}</span></Col>
      </Row>
      <Row :gutter="4">
        <Col span="8" class="span-rg"><span>速度：</span></Col>
        <Col span="16"><span>{{devData.arrt.speed}}</span></Col>
      </Row>-->
      <Row :gutter="4">
        <Col span="8" class="span-rg"><span>{{$t('battery_percent')}}：</span></Col>
        <Col span="16"><span >{{devData.arrt.batteryInfo}}</span></Col>
      </Row>
      <Row :gutter="4">
        <Col span="8" class="span-rg"><span>{{$t('storage_capacity')}}：</span></Col>
        <Col span="16"><span>{{devData.arrt.storage}}</span></Col>
      </Row>
      <Row :gutter="4">
        <Col span="8" class="span-rg"><span>{{$t('storage_already_used')}}：</span></Col>
        <Col span="16"><span>{{devData.arrt.usedMemory}}</span></Col>
      </Row>
<!--      <Row :gutter="4">
        <Col span="8" class="span-rg"><span>内存空闲：</span></Col>
        <Col span="16"><span>{{devData.arrt.remainMemory}}</span></Col>
      </Row>-->
      <Row :gutter="4">
        <Col span="8" class="span-rg"><span>{{$t('record_status')}}：</span></Col>
        <Col span="16">
          <span v-if="devData.arrt.recordStatus=='1'" style="color: #c80000">{{$t('is_recording')}}</span>
          <span v-else>{{$t('un_recording')}}</span>
        </Col>
      </Row>
<!--      <Row :gutter="4">
        <Col span="8" class="span-rg"><span>位置：</span></Col>
        <Col span="16"><span>{{devData.arrt.locate}}</span></Col>
      </Row>-->
      <Row :gutter="4">
        <Col span="8" class="span-rg"><span>{{$t('organization_name')}}：</span></Col>
        <Col span="16"><span>{{devData.arrt.orgName}}</span></Col>
      </Row>

<!--      <Row :gutter="4">
        <Col span="24">
          <Button icon="md-easel" class="btn-com" title="实时视频" type="info" v-if="devData.status==1" @click="btnClick('liveVideo')"></Button>
          <Button icon="md-mic" class="btn-com" title="语音对讲" type="info" v-if="devData.status==1" @click="btnClick('liveAudio')"></Button>
          <Button icon="md-git-merge" class="btn-com" title="跟踪" type="info" v-if="devData.status==1" @click="btnClick('track')"></Button>
          <Button icon="md-people" class="btn-com" title="附近" type="info" v-if="devData.status==1" @click="btnClick('nearby')"></Button>
          <Button icon="md-information" class="btn-com" title="设备信息" type="info" @click="btnClick('deviceInfo')"></Button>
        </Col>
      </Row>-->
    </div>
  </div>
</template>
<script>
export default {
  name:"MsgPopupForm",
  props: {
    dataTitle:{
      type:String,
      default:''
    },
    devData:{
      type:Object,
      default:()=>{
        return{
          title:"",
          arrt:{
            channelCode:"",
            deviceName:"",
            userName:"",
            longitude:"0",
            latitude:"0",
            direction:"",
            speed:"10KM/S",
            locate:"",
            orgName: ""
          }
        }
      }
    }
  },
  watch:{
    devData(){
      this.rowData.status = this.devData.online == '1' || this.devData.online == 'true' ?1:0;
    }
  },
  data(){
    return{
      rowData:{
        status:0,
        code:'12345'
      }
    }
  },
  methods:{
    close(){
      this.$refs["popup-closer"].blur();
      this.$emit('close', false);
    },
    btnClick(event){
      /**
       * locate 定位
       * liveVideo 实时视频
       * liveAudio 监听
       * videoCall 视频通话
       * audioCall 语音通话
       * takePicture 拍照
       * issueMessage 消息下发
       * favorite 收藏
       * track 跟踪
       * nearby 附近
       * deviceInfo 设备信息
       */
      console.log(event);
      this.$emit('btnClick', event,null,this.devData)
    }
  },
  created() {

  },
  mounted() {

  }
}
</script>
<style lang="less" scoped>
.ol-popup {
  position: absolute;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.ol-popup-closer:after {
  content: "✖";
}

/****

 */
.top,.bottom{
  text-align: center;
}
.center{
  width: 300px;
  margin: 10px auto;
  overflow: hidden;
}
.center-left{
  float: left;
}
.center-right{
  float: left;
}

.poptip-div{
  margin-left: 0px;
  .btn{
    margin-left: 5px;
  }
}

.btn-com{
  margin-left: 5px;
  margin-bottom: 2px;
}

.span-rg{
  text-align: right;
}
</style>
